<!--
 * @Author: cpasion-office-win10 373704015@qq.com
 * @Date: 2022-08-04 15:34:04
 * @LastEditors: CPS holy.dandelion@139.com
 * @LastEditTime: 2022-08-07 19:54:49
 * @FilePath: \vue3-ts\src\components\Test.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="fixed top-10 w-72 px-6">
    <Listbox v-model="selectedPerson">
      <div class="relative mt-1">
        <ListboxButton
          class="
            relative
            w-full
            cursor-default
            rounded-lg
            bg-white
            py-2
            pl-3
            pr-10
            text-left
            shadow-md
            focus:outline-none
            focus-visible:border-indigo-500
            focus-visible:ring-2
            focus-visible:ring-white
            focus-visible:ring-opacity-75
            focus-visible:ring-offset-2
            focus-visible:ring-offset-orange-300
            sm:text-sm
          "
        >
          <span class="block truncate">{{ selectedPerson.name }}</span>
          <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
            <SelectorIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
          </span>
        </ListboxButton>

        <transition leave-active-class="transition duration-100 ease-in" leave-from-class="opacity-100" leave-to-class="opacity-0">
          <ListboxOptions
            class="
              absolute
              mt-1
              max-h-60
              w-full
              overflow-auto
              rounded-md
              bg-white
              py-1
              text-base
              shadow-lg
              ring-1 ring-black ring-opacity-5
              focus:outline-none
              sm:text-sm
            "
          >
            <ListboxOption v-slot="{ active, selected }" v-for="person in people" :key="person.name" :value="person" as="template">
              <li
                :class="[active ? 'bg-amber-100 text-amber-900' : 'text-gray-900', 'relative cursor-default select-none py-2 pl-10 pr-4']"
              >
                <span :class="[selected ? 'font-medium' : 'font-normal', 'block truncate']">{{ person.name }}</span>
                <span v-if="selected" class="absolute inset-y-0 left-0 flex items-center pl-3 text-amber-600">
                  <CheckIcon class="h-5 w-5" aria-hidden="true" />
                </span>
              </li>
            </ListboxOption>
          </ListboxOptions>
        </transition>
      </div>
    </Listbox>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
// import { Listbox, ListboxLabel, ListboxButton, ListboxOptions, ListboxOption } from "@headlessui/vue";
import { CheckIcon, SelectorIcon } from "@heroicons/vue/solid";

const people = [
  { name: "Wade Cooper" },
  { name: "Arlene Mccoy" },
  { name: "Devon Webb" },
  { name: "Tom Cook" },
  { name: "Tanya Fox" },
  { name: "Hellen Schmidt" },
];

const selectedPerson = ref(people[0]);
</script>
